import 'package:cook_dinner/config/include.dart';
import 'package:cook_dinner/pages/sort/sort_view/sort_data.dart';
import 'package:cook_dinner/pages/step/step.dart';
import 'package:flutter/material.dart';

class SortView extends StatelessWidget {
  const SortView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 10.rpx),
      child: ListView(
        children: [
          _title('人气榜单'),
          Padding(
            padding: EdgeInsets.only(left: 21.rpx, right: 6.rpx),
            child: Wrap(
              children: List.generate(
                6,
                (index) {
                  return _item(
                    menu[index]['text'],
                    menu[index]['img'],
                    context,
                  );
                },
              ),
            ),
          ),
          _title('意面'),
          Padding(
            padding: EdgeInsets.only(left: 21.rpx, right: 6.rpx),
            child: Wrap(
              children: List.generate(
                3,
                (index) {
                  return _item(
                    menu[index + 6]['text'],
                    menu[index + 6]['img'],
                    context,
                  );
                },
              ),
            ),
          ),
          _title('主菜'),
          Padding(
            padding: EdgeInsets.only(left: 21.rpx, right: 6.rpx),
            child: Wrap(
              children: List.generate(
                3,
                (index) {
                  return _item(
                    menu[index + 9]['text'],
                    menu[index + 9]['img'],
                    context,
                  );
                },
              ),
            ),
          ),
          _title('烘培'),
          Padding(
            padding: EdgeInsets.only(left: 21.rpx, right: 6.rpx),
            child: Wrap(
              children: List.generate(
                3,
                (index) {
                  return _item(
                    menu[index + 12]['text'],
                    menu[index + 12]['img'],
                    context,
                  );
                },
              ),
            ),
          ),
          _title('快手菜'),
          Padding(
            padding: EdgeInsets.only(left: 21.rpx, right: 6.rpx),
            child: Wrap(
              children: List.generate(
                6,
                (index) {
                  return _item(
                    menu[index + 8]['text'],
                    menu[index + 8]['img'],
                    context,
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  Padding _title(text) {
    return Padding(
      padding: EdgeInsets.only(left: 35.rpx, bottom: 10.rpx),
      child: Text(
        text,
        style: TextStyle(
          fontSize: 14.rpx,
          color: const Color(0xff333333),
        ),
      ),
    );
  }

  Widget _item(text, img, context) {
    return InkWell(
      onTap: () => AppTo.goto(context, AppPage.dishes),
      child: Container(
        width: (HYSizeFit.screenWidth - 152.rpx) / 3,
        height: (HYSizeFit.screenWidth - 152.rpx) / 3,
        margin: EdgeInsets.only(right: 11.rpx, bottom: 14.rpx),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12.rpx),
          image: DecorationImage(
            image: AssetImage('assets/images/${img}'),
            fit: BoxFit.cover,
          ),
        ),
        child: Container(
          width: double.infinity,
          height: double.infinity,
          padding: EdgeInsets.only(bottom: 7.rpx, left: 8.rpx, right: 8.rpx),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12.rpx),
            color: const Color(0xff252525).withOpacity(0.4),
          ),
          alignment: Alignment.bottomCenter,
          child: Text(
            text,
            style: TextStyle(fontSize: 12.rpx, color: Colors.white),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    );
  }
}
